<template>
  <div class="content">
    <a-input-search
      v-model:value="value"
      placeholder="请输入内容"
      class="x-input-search"
      size="large"
      allowClear
      @search="onSearch"
    >
      <template #addonBefore>
        <a-select
          v-model:value="selectValue"
          style="width: 80px"
          @select="onSelect"
        >
          <a-select-option value="baidu">百度</a-select-option>
          <a-select-option value="goole">谷歌</a-select-option>
        </a-select>
      </template>
    </a-input-search>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { getItem, setItem, keys } from "@/utils/localStorage";

export default defineComponent({
  name: "SearchInputCom",
  props: {},
  data() {
    return {
      value: "",
      selectValue: "baidu",
    };
  },
  created() {
    this.getSelect();
  },
  beforeUnmount() {
    //
  },
  computed: {
    //
  },
  methods: {
    // 获取搜索类型
    getSelect() {
      let value = getItem(keys.SearchType);
      if (!value) {
        value = "baidu";
      }
      this.selectValue = value;
    },
    // 选择
    onSelect(value: string) {
      setItem(keys.SearchType, value);
    },
    //搜索内容
    onSearch(searchValue: string) {
      if (this.selectValue == "baidu") {
        window.open("https://www.baidu.com/s?ie=utf-8&wd=" + searchValue);
      } else if (this.selectValue == "goole") {
        window.open(
          `https://www.google.com/search?q=${searchValue}&oq=${searchValue}&sourceid=chrome&ie=UTF-8`
        );
      }
    },
  },
});
</script>

<style scoped lang="less">
.content {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
<style lang="less">
.x-input-search {
  width: 600px;
  box-shadow: 0px 1px 6px 1px rgba(32, 33, 36, 0.6);
  border-radius: 20px;

  .ant-input-group-addon:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 1px solid white;
    // background-color: rgba(67, 67, 67, 0.4);
    background-color: white;
    border-right: none;

    .ant-select-selection-item {
      color: #38393a;
    }
    .anticon-down {
      color: #38393a;
    }
  }

  .ant-input-group-addon:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    // background-color: rgba(67, 67, 67, 0.4);
    background-color: white;
    border: 1px solid white;
    border-right: none;
    border-left: none;
  }

  .ant-input-affix-wrapper {
    // background-color: rgba(67, 67, 67, 0.4);
    background-color: white;
    border: 1px solid white !important;
    border-right: none !important;
    border-left: none !important;

    .ant-input {
      background: none;
      color: #38393a;
    }
  }
  .ant-input-affix-wrapper:hover,
  .ant-input-affix-wrapper-focused {
    border: 1px solid white !important;
    border-right: none !important;
    border-left: none !important;
  }

  .ant-input-search-button {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border: 1px solid white;
    background: none;
    border-left: none;
    height: 40.5px !important;

    .anticon-search {
      color: #38393a;
    }
  }
}
</style>
